*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    outline:none
}
html,body,.main{
    width:100%;
    height:100%;
    min-width:1200px;
    min-height:800px
}
.main{
    display:flex;
    align-items:center;
    justify-content:center;
    background: #e3d2bd;
    background-attachment: fixed;
    background-size: cover;
}
.card-box{
    display:flex;
    width:1000px;
    height:800px;
    flex-wrap:wrap;
    perspective:1000px;
    border-radius:8px;
   /* background-color:#342e2e;*/
    justify-content: space-between;
}
.card-box .card{
    display:flex;
    align-items:center;
    
    justify-content:center;
    position:relative;
    width:calc(20% - 30px);
    height:calc(25% - 30px);
    margin:5px;transform:scale(1);
    transform-style:preserve-3d;
    transition:transform .5s;
    cursor:pointer
}
.card-box .card:active{
    transform:scale(0.97);
    transition:transform .2s
}
.card-box .card.flip{
    transform:rotateY(180deg)
}
.card-box .card .front-face,.card-box .card .back-face{
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;width:100%;
    height:100%;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    background-color:#f6e9da;border-radius:8px
}
.card-box .card .front-face img,.card-box .card .back-face img{
    width:100%;
    height:100%;
    -o-object-fit:cover;
    object-fit:cover;
    border-radius:8px;
}
.card-box .card .front-face{
    transform:rotateY(180deg)
}
.options-bar{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    position:absolute;
    left:0;
    width:200px;
    height:200px;
    /*background-image: url(./冬瓜.jpg);*/
    background-repeat: no-repeat;
    background-size: cover;
}
.options-bar :nth-child(n){
    margin-bottom:12px
}
.options-bar :nth-last-child(1){
    margin-bottom:0
}
.options-bar p{
    font-size:23px;
    font-weight:800;
    color:#2e2e2e;
}
.options-bar button{
    padding:12px 24px;
    color:#fff;
    font-size:18px;
    background-color:#c1975d;
    border:none;
    border-radius:8px;
    transition:opacity .5s;
    cursor:pointer
}
.options-bar button:hover{
    opacity:.5
}
.options-bar button:disabled{
    opacity:.5;
   /* cursor:not-allowed*/
}